import React, { lazy, Suspense } from 'react';
import { BrowserRouter, HashRouter , Router, Route, Switch } from 'dva/router';
// 启用路由配置
import { renderRoutes } from 'react-router-config';
// 导入组件
// import IndexPage from './routes/IndexPage';
// import CountPage from './routes/CountPage';
// import UserPage from './routes/UserPage';
// import MessagePage from './routes/MessagePage';
// **正常的模块导入必须放在懒加载之前
// const MessagePage = lazy(() => slowImport(import('./routes/MessagePage'),2000));
// const MessagePage=lazy(()=>import('./routes/MessagePage'));
// 路由懒加载; 路由/组件懒加载都必须使用Suspense组件包裹
const routes = [
  {
    path: '/',
    exact: true,
    component: lazy(() => import('./routes/IndexPage'))
  },
  {
    path: '/count',
    exact: true,
    component: lazy(() => import('./routes/CountPage'))
  },
  {
    path: '/message',
    exact: true,
    component: lazy(() => slowImport(import('./routes/MessagePage'), 1000))
  },
  {
    path: '/user',
    exact: true,
    component: lazy(() => import('./routes/UserPage'))
  }
];



function RouterConfig({ history }) {
  return (
    <BrowserRouter history={history}>
      {/* <Suspense fallback={<h1>loading...</h1>}>
        <Switch>
          <Route path="/" exact component={IndexPage} />
          <Route path="/count" exact component={CountPage} />
          <Route path="/message" exact component={MessagePage} />
          <Route path="/user" exact component={UserPage}></Route>
        </Switch>
      </Suspense> */}

      <Suspense fallback={<h1 style={{ textAlign: 'center' }}>Loading...</h1>}>
        {renderRoutes(routes)}
      </Suspense>
    </BrowserRouter>
  );
}


// 为了看到异步加载组件的效果, 实现的一个延时加载的方法
function slowImport(value, ms = 1000) {
  return new Promise(resolve => {
    setTimeout(() => resolve(value), ms);
  })
}


export default RouterConfig;
